<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作CSS</title>
		<style type="text/css">
			.cls1 {
				font-family: "隶书";
				font-style: italic;
			}

			.cls2 {
				font-family: "黑体";
				font-weight: bolder;
				color: red;
			}
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			/*
				addClass() - 向被选元素添加一个或多个类
				removeClass() - 从被选元素删除一个或多个类
				toggleClass() - 对被选元素进行添加/删除类的切换操作
				相当于JS中className
				
				当然,还可以单独修改某个样式
				css("样式名")		获取样式值
				css("样式名","值")	设置样式值
			*/
			$(function() {
				$("p").click(function() {
					//$(this).removeClass().addClass("cls2");
					
					//切换
					//$(this).toggleClass("cls2");
					
					//修改某个样式
					//$(this).css("fontFamily","黑体");
					
					//修改多个样式
					$(this).css({"fontFamily":"黑体","color":"red"});
				});
			});
		</script>
	</head>
	<body>
		<p class="cls1">这是一个段落</p>
	</body>
</html>
